<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
   <!-- 引入element样式 -->
   <!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->
</head>
<body>
<!-- loader Start -->
<div id="loading">
   <div id="loading-center">
   </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
   <!-- Sidebar  引入公共列表-->
   <div th:include="public_user::list" class="iq-sidebar"></div>
   <!-- Responsive Breadcrumb End-->
   <!-- Page Content  -->
   <div id="content-page" class="content-page">
      <!-- TOP Nav Bar  引入公共头部-->
      <div th:include="public_user::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid" id="content">
               <div class="row">
                  <div class="col-lg-4">
                     <div class="iq-card">
                        <div class="iq-card-body pl-0 pr-0 pt-0">
                           <div class="docter-details-block">
                              <div class="doc-profile-bg bg-primary" style="height:150px;">
                              </div>
                              <div class="docter-profile text-center">
                                  <img th:if="${#strings.isEmpty(session.userInfo.userImg)}" th:src="@{/images/user/1.jpg}" class="img-fluid rounded mr-3" alt="user">
                                  <img th:if="${!#strings.isEmpty(session.userInfo.userImg)}" th:src="@{'/images/upload/'+${session.userInfo.userImg}}" style="width: 100px;height: 100px" class="img-fluid rounded mr-3" alt="user">
                              </div>
                              <div class="text-center mt-3 pl-3 pr-3">
                                 <h4><b th:text="${session.userInfo.userInfo.name}"></b></h4>
                                 <p th:text="${session.userInfo.role.roleName}"></p>
                                 <p class="mb-0">给我一个支点，我能翘起地球。</p>
                              </div>
                              <hr>
                              <ul class="doctoe-sedual d-flex align-items-center justify-content-between p-0 m-0">
                                 <li class="text-center">
                                    <h3 class="counter" th:text="${session.volSend}">4500</h3>
                                    <span>发布</span>
                                  </li>
                                  <li class="text-center">
                                    <h3 class="counter" th:text="${session.volGet}">100</h3>
                                    <span>接取</span>
                                  </li>
                                  <li class="text-center">
                                    <h3 class="counter" th:text="${session.userInfo.userInfo.volNum}">100</h3>
                                    <span>累计完成</span>
                                  </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">个人详细信息
                                  <button th:if="${session.userInfo.userInfo.spec eq null}" type="button" class="btn btn-outline-info rounded-pill mb-3" data-toggle="modal" data-target="#exampleModalCenter2"><i class="ri-alert-fill"></i>待完善</button>
                                  <button th:if="${session.userInfo.userInfo.spec != null}" type="button" class="btn iq-bg-warning btn-rounded btn-sm my-0" data-toggle="modal" data-target="#exampleModalCenter2">修改</button>
                              </h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div class="about-info m-0 p-0">
                              <div class="row">
                                 <div class="col-4">账号:</div>
                                 <div class="col-8" th:text="${session.userInfo.username}"></div>
                                 <div class="col-4">角色:</div>
                                 <div class="col-8" th:text="${session.userInfo.role.roleName}"></div>
                                 <div class="col-4">姓名:</div>
                                 <div class="col-8" v-text="user.userInfo.name"></div>
                                 <div class="col-4">性别:</div>
                                 <div class="col-8">
                                     <span th:if="${session.userInfo.userInfo.sex eq 1}">男</span>
                                     <span th:if="${session.userInfo.userInfo.sex eq 0}">女</span>
                                 </div>
                                 <div class="col-4">电话:</div>
                                 <div class="col-8" th:text="${session.userInfo.userInfo.phone}"></div>
                                 <div class="col-4">特长:</div>
                                 <div class="col-8" v-text="user.userInfo.spec"></div>
                                 <div class="col-4">创建时间:</div>
                                 <div class="col-8" v-text="myFormatDate(user.createTime)"></div>
                              </div>
                           </div>
                        </div>
                     </div>

                      <!--     完善信息模态框                 -->
                      <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                              <div class="modal-content">
                                  <div class="modal-header">
                                      <h5 class="modal-title" id="exampleModalCenterTitle2">个人详细信息</h5>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                      </button>
                                  </div>
                                  <div class="modal-body">


                                      <div class="form-group row">
                                          <label class="control-label col-sm-2 align-self-center mb-0" for="name">姓名:</label>
                                          <div class="col-sm-10">
                                              <input v-model="user.userInfo.name" type="text" class="form-control" id="name">
                                          </div>
                                      </div>


                                      <div class="form-group row">
                                          <label class="control-label col-sm-2 align-self-center mb-0" for="sex">性别:</label>
                                          <div class="col-sm-10">
                                              <select class="form-control-plaintext" v-model="user.userInfo.sex" id="sex">
                                                  <option :selected="user.userInfo.sex==1" value="1">男</option>
                                                  <option :selected="user.userInfo.sex==0" value="0">女</option>
                                              </select>
                                          </div>
                                      </div>

                                      <div class="form-group row">
                                          <label class="control-label col-sm-2 align-self-center mb-0" for="spec">特长:</label>
                                          <div class="col-sm-10">
                                              <input v-model="user.userInfo.spec" type="text" class="form-control" id="spec">
                                          </div>
                                      </div>


                                  </div>


                                  <div class="modal-footer">
                                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                      <button type="button" @click="updateInfo()" data-dismiss="modal" class="btn btn-primary">Save changes</button>
                                  </div>
                              </div>
                          </div>
                      </div>

                     
                  </div>
                  <div class="col-lg-8">
                     <div class="row">
<!--                        <div class="col-md-6">-->
<!--                           <div class="iq-card">-->
<!--                              <div class="iq-card-header d-flex justify-content-between">-->
<!--                                 <div class="iq-header-title">-->
<!--                                    <h4 class="card-title">荣誉</h4>-->
<!--                                 </div>-->
<!--                              </div>-->
<!--                              <div class="iq-card-body">-->
<!--                                 <ul class="speciality-list m-0 p-0">-->
<!--                                    <li class="d-flex mb-4 align-items-center">-->
<!--                                       <div class="user-img img-fluid"><a href="#" class="iq-bg-primary"><i class="ri-award-fill"></i></a></div>-->
<!--                                       <div class="media-support-info ml-3">-->
<!--                                          <h6>金牌志愿者</h6>-->
<!--                                          <p class="mb-0">2次</p>-->
<!--                                       </div>-->
<!--                                    </li>-->
<!--                                    <li class="d-flex mb-4 align-items-center">-->
<!--                                       <div class="user-img img-fluid"><a href="#" class="iq-bg-warning"><i class="ri-award-fill"></i></a></div>-->
<!--                                       <div class="media-support-info ml-3">-->
<!--                                          <h6>银牌志愿者</h6>-->
<!--                                          <p class="mb-0">5次</p>-->
<!--                                       </div>-->
<!--                                    </li>-->
<!--                                    <li class="d-flex mb-4 align-items-center">-->
<!--                                       <div class="user-img img-fluid"><a href="#" class="iq-bg-info"><i class="ri-award-fill"></i></a></div>-->
<!--                                       <div class="media-support-info ml-3">-->
<!--                                          <h6>星级志愿者</h6>-->
<!--                                          <p class="mb-0">3次</p>-->
<!--                                       </div>-->
<!--                                    </li>-->
<!--                                 </ul>-->
<!--                              </div>-->
<!--                           </div>-->
<!--                        </div>-->
<!--                        <div class="col-md-6">-->
<!--                           <div class="iq-card">-->
<!--                              <div class="iq-card-header d-flex justify-content-between">-->
<!--                                 <div class="iq-header-title">-->
<!--                                    <h4 class="card-title">最近记录</h4>-->
<!--                                 </div>-->
<!--                              </div>-->
<!--                              <div class="iq-card-body">-->
<!--                                 <ul class="iq-timeline">-->
<!--                                    <li>-->
<!--                                       <div class="timeline-dots border-success"></div>-->
<!--                                       <h6 class="">社区旧书籍回收</h6>-->
<!--                                       <small class="mt-1">23 November 2019</small>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                       <div class="timeline-dots border-danger"></div>-->
<!--                                       <h6 class="">安全知识宣讲</h6>-->
<!--                                       <small class="mt-1">20 November 2019</small>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                       <div class="timeline-dots border-primary"></div>-->
<!--                                       <h6 class="mb-1">社区安全隐患排查</h6>-->
<!--                                       <small class="mt-1">19 November 2019</small>-->
<!--                                    </li>-->
<!--                                 </ul>-->
<!--                              </div>-->
<!--                           </div>-->
<!--                        </div>-->
                        
                        <div class="col-md-12">
                           <div class="iq-card">
                              <div class="iq-card-header d-flex justify-content-between">
                                 <div class="iq-header-title">
                                    <h4 class="card-title">我的发布</h4>
                                 </div>
                              </div>
                              <div class="iq-card-body">
                                 <table class="table mb-0 table-borderless">
                                  <thead>
                                      <tr>
                                          <th scope="col">创建时间</th>
                                          <th scope="col">类型</th>
                                          <th scope="col">名称</th>
                                          <th scope="col">人员需求</th>
                                              <th scope="col">状态</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr v-for="(vol) in volSend">
                                          <td v-text="myFormatDate(vol.createTime)"></td>
                                          <td v-text="vol.type.typeName"></td>
                                          <td v-text="vol.volName"></td>
                                          <td v-text="vol.userNeed"></td>
                                          <td>
                                              <span v-if="vol.state == -1" class="badge badge-success">完成</span>
                                              <span v-if="vol.state != -1" class="badge badge-warning">未完成</span>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12">
                           <div class="iq-card">
                              <div class="iq-card-header d-flex justify-content-between">
                                 <div class="iq-header-title">
                                    <h4 class="card-title">我的接取</h4>
                                 </div>
                              </div>
                              <div class="iq-card-body">
                                 <table class="table mb-0 table-borderless">
                                  <thead>
                                      <tr>
                                          <th scope="col">时间</th>
                                          <th scope="col">类型</th>
                                          <th scope="col">名称</th>
                                          <th scope="col">发布者</th>
                                          <th scope="col">发布者电话</th>
                                          <th scope="col">状态</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr v-for="(userVol) in volGet">
                                          <td v-text="myFormatDate(userVol.vol.createTime)"></td>
                                          <td v-text="userVol.vol.type.typeName"></td>
                                          <td v-text="userVol.vol.volName"></td>
                                          <td v-text="userVol.vol.userInfo.name"></td>
                                          <td v-text="userVol.vol.userInfo.phone"></td>
                                          <td>
                                              <span v-if="userVol.state != -1" class="badge badge-primary">进行中</span>
                                              <span v-if="userVol.state == -1" class="badge badge-success">已完成</span>
                                          </td>

                                      </tr>

                                  </tbody>
                              </table>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        <!-- Copyright 2020 更多模板：<a href="http://www.mycodes.net/" target="_blank">模板之家</a> All Rights Reserved. -->
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
    <!-- Wrapper END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- Appear JavaScript -->
    <script th:src="@{/js/jquery.appear.js}"></script>
    <!-- Countdown JavaScript -->
    <script th:src="@{/js/countdown.min.js}"></script>
    <!-- Counterup JavaScript -->
    <script th:src="@{/js/waypoints.min.js}"></script>
    <script th:src="@{/js/jquery.counterup.min.js}"></script>
    <!-- Wow JavaScript -->
    <script th:src="@{/js/wow.min.js}"></script>
    <!-- Apexcharts JavaScript -->
    <script th:src="@{/js/apexcharts.js}"></script>
    <!-- Slick JavaScript -->
    <script th:src="@{/js/slick.min.js}"></script>
    <!-- Select2 JavaScript -->
    <script th:src="@{/js/select2.min.js}"></script>
    <!-- Owl Carousel JavaScript -->
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <!-- Magnific Popup JavaScript -->
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script th:src="@{/js/smooth-scrollbar.js}"></script>
    <!-- lottie JavaScript -->
    <script th:src="@{/js/lottie.js}"></script>
    <!-- Chart Custom JavaScript -->
    <script th:src="@{/js/chart-custom.js}"></script>
    <!-- Custom JavaScript -->
    <script th:src="@{/js/custom.js}"></script>


    <!--      <script th:src="@{/js/vue.js}"></script>-->
    <!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
    <!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script th:src="@{/js/axio.js}"></script>
    <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
    <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>

    <script>
        new Vue({
            el: "#content",
            data:{
                user:{
                    userInfo:{}
                },
                volSend:{},
                volGet:{}
            },
            mounted(){
                this.getInfo();
                this.getVolSend();
                this.getVolGet();
            },
            methods:{
                getInfo(){
                    // 发送ajax请求，尝试登录
                    let url = rootUrl+`user/getInfo`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.user = info;
                            console.log(this.user);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                getVolSend(){
                    let url = rootUrl+`vol/getVolSend`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.volSend = info;
                            console.log(this.volSend);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                getVolGet(){
                    let url = rootUrl+`vol/getVolGet`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.volGet = info;
                            console.log(this.volGet);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                updateInfo(){
                    console.log(this.user);
                    let url = rootUrl+`user/updateInfo`;
                    axios.post(url,this.user)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) {
                                this.open4('更新失败');
                                return;
                            }
                            // 修改成功
                            let info = data.data;
                            this.user = info;
                            console.log('更新成功：'+data.code);
                            this.open2('更新成功');

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                myFormatDate(value){//处理日期格式
                    let dt = new Date(value);
                    let year = dt.getFullYear();
                    let month = (dt.getMonth() + 1).toString().padStart(2,'0');
                    let date = dt.getDate().toString().padStart(2,'0');
                    let hour = dt.getHours().toString().padStart(2,'0');
                    let minute = dt.getMinutes().toString().padStart(2,'0');
                    let second = dt.getSeconds().toString().padStart(2,'0');
                    // return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
                    return `${year}-${month}-${date} `;
                },
                open1(msg) {
                    this.$message({
                        showClose: true,
                        message: msg
                    });
                }, // 提示
                open2(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'success'
                    });
                }, // 成功
                open3(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'warning'
                    });
                }, // 警告
                open4(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'error'
                    });
                }, // 错误
            }
        })
    </script>
   </body>
</html>